<template>
  <div class="content-header">
    <div class="topic-title" v-show="props.showTitle">
      <div class="title-input" v-if="!titleEditable">{{content}}</div>
      <el-input ref="titleInput" placeholder="无标题话题"  v-model="content" v-else @change="onChange" @blur="onChange"></el-input>
    </div>
    <div class="opt-area">
      <div class="opt-btn" @click="collectedTopic" v-show="props.showCollectionIcon"><el-icon><Star></Star></el-icon></div>
      <div class="opt-btn"><el-icon><Share></Share></el-icon></div>
      <div class="opt-btn" @click="setShowOptPlane"><el-icon><More></More></el-icon></div>
      <OptBtnMenu @menu-click="clickMenu" :buttons="menuButtons" v-show="showOptPlane" :menu-style="menuStyle" @close-menu="setShowOptPlane"></OptBtnMenu>
    </div>
  </div>
</template>

<script setup lang="ts">
import Star from '@/components/icons/starIcon.vue';
import Share from '@/components/icons/shareIcon.vue'
import More from '@/components/icons/moreIcon.vue';
import {defineProps, reactive, type Ref, ref, watch} from "vue";
import EditorIcon from "@/components/icons/editorIcon.vue";
import CopyIcon from "@/components/icons/copyIcon.vue";
import SelectIcon from "@/components/icons/selectIcon.vue";
import DeleteIcon from "@/components/icons/deleteIcon.vue";
import { defineEmits } from 'vue';
import OptBtnMenu from "@/components/OptBtnMenu.vue";


const menuButtons = [{
  name: '重命名',
  icon: EditorIcon,
  handle: ()=>{
    editTitle();
  }
},{
  name: '复制',
  icon: CopyIcon,
  handle: ()=>{
    copyTo()
    setShowOptPlane(false);
  }
},{
  name: '多选',
  icon: SelectIcon,
  handle:()=>{
    emit('multiSelect');
    setShowOptPlane(false);
  }
}
,{
  name: '删除',
  icon: DeleteIcon,
  handle: ()=>{
  }
}];
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showCollectionIcon: {
    type: Boolean,
    default: true
  }
});
const menuStyle = reactive({
  left: '',
  top: ''
});
const titleInput = ref<HTMLElement|null>(null);
const clickMenu = (options: any) =>{
  options.handle();
  setShowOptPlane(false);
  setTimeout(() => {
    if (titleInput.value) {
      const input = titleInput.value as HTMLInputElement;
      input.focus()
      input.setSelectionRange(0, props.title?.length??0)
    }
  }, 50);
}
const  titleEditable= ref(false);
const  content = ref(props.title);
const showOptPlane:Ref<Boolean> = ref<Boolean>(false);
const emit = defineEmits(['collectTopic', 'setTitle', 'copyTo', 'multiSelect']);
watch(() => props.title, (v) => {
  content.value = v??'';
})
const setShowOptPlane = (e:any) => {
  showOptPlane.value = !showOptPlane.value;
  if (e){
    menuStyle.left = (e.x - 150) + 'px';
    menuStyle.top = (e.y - 48) + 'px';
  }
}
const collectedTopic = () => {
  emit('collectTopic');
}
const editTitle = () => {
  titleEditable.value = true;
  showOptPlane.value = false;
}

const copyTo = () => {
  emit('copyTo');
}
const setCopy = () => {
  showOptPlane.value = false;
}

const setMultiSelect = () => {
  showOptPlane.value = false;
}

const setExport = () =>{
  showOptPlane.value = false;
}

const setDelete =() => {
  showOptPlane.value = false;
}

const onChange = () => {
  emit('setTitle', {
    title: content.value
  });
  titleEditable.value = false;
}
</script>

<style lang="less" >
.content-header {
  width: 100%;
  height: 8vh;
  border-bottom: 1px solid #E6EAEE;
  display: flex;
  position: relative;
  min-height: 60px;
  .topic-title {
    height: 100%;
    width: 40%;
    font-size: 18px;
    color: #2F2F2F;
    .title-input {
      font-size: 18px;
      color: #2F2F2F;
    }
    padding-top: 2.5vh;
    padding-left: 69px;
    .el-input__wrapper {
      box-shadow: none;
      font-size: 16px;
    }
  }
  .opt-area{
    position: absolute;
    right: 48px;
    height: 100%;
    display: flex;
    cursor: pointer;
    .opt-btn{
      width: 32px;
      border: 0;
      margin-top: 5%;
      font-size: 21px;
      margin-left: 21px;
      cursor: pointer;
    }
    .more-btn{
      border: 1px #36444E solid;
      padding: 5px;
      height: 28px;
      width: 28px;
      border-radius: 100%;
      .el-icon {
        top: 3px;
        left: 2px;
        position: absolute;
      }
    }
  }
}
</style>